<template>
  <div class="w-page">
    <div class="w-header">
      <div class="w-head">{{info.title}}</div>
    </div>
    <img :src="info.image" alt="">
    <div class="ck-content" v-html="info.content">
    </div>
  </div>
</template>

<script>
import { articleClassDetail } from '@/api/article'
import '../styles/content-styles.css'
export default {
  data () {
    return {
      info: {
        title: '山西师范大学教育发展基金会简介',
        source: '管理员',
        date: '2020.02.10 16:30',
        image: '2020.02.10 16:30'
      }
    }
  },
  created () {
    articleClassDetail({ classId: this.$route.query.id }).then(response => {
      this.info.title = response.data.title
      this.info.date = response.data.createTime
      this.info.content = response.data.content
      this.info.image = response.data.coverPicture
    })
  }
}
</script>

<style scoped>
	.w-page {
		width: 100vw;
		padding: 0 20px;
	}

	.w-header {
		padding-top: 17px;
		padding-bottom: 7px;
		border-bottom: 1px solid #E5E5E5;
		margin-bottom: 15px;
	}

	.w-head {
		font-size: 19px;
		color: rgba(49, 49, 49, 1);
	}

	.w-form {
		font-size: 13px;
		color: rgba(112, 112, 112, 1);
		margin-top: 15px;
	}

	.w-page img {
		width: 100%;
		display: block;
	}

	.w-con p {
		text-indent: 20px;
		font-size: 16px;
		color: rgba(83, 83, 83, 1);
		padding: 20px 0;
		line-height: 1.8;
		text-align: justify;
	}
</style>
